<template>
  <div>
    <el-dialog
      v-model="centerDialogVisible"
      title="选择信息"
      width="60%"
      align-center
      :before-close="handleClose"
      draggable
      overflow
    >
      <!-- 表单部分 -->
      <el-row>
        <el-col :span="24">
          <el-form ref="formRef" :model="form" :rules="formRules" label-width="auto" :inline="true">
            <!-- 动态生成表单项 -->
            <el-form-item v-for="column in querycolumns" :label="column.label" :key="column.prop" :prop="column.prop">
              <el-input v-model="form[column.prop]" placeholder="请输入"></el-input>
            </el-form-item>

            <!-- 搜索按钮 -->
            <el-form-item>
              <el-button type="primary" @click="submit">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- <el-divider content-position="left">数据信息</el-divider> -->
      <!-- 选择数据列表 -->
      <el-row>
        <el-col :span="24">
          <el-table
            ref="SelectTeamBillFormRef"
            :data="data"
            style="width: 100%"
            height="260px"
            :row-style="getRowStyle"
            @selection-change="handleSelectionChange"
            @row-click="handleRowClick"
            show-overflow-tooltip
            border
          >
            <el-table-column type="selection" width="50"> </el-table-column>
            <el-table-column type="index" label="序号" width="80"> </el-table-column>
            <!-- 动态生成表格列 -->
            <el-table-column
              v-for="column in columns"
              :key="column.prop"
              :prop="column.prop"
              :label="column.label"
            ></el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <!-- 对话框底部 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCloseDialog">取消</el-button>
          <el-button type="primary" @click="handleConfirmSelection(SelectTeamBillFormRef)">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, Ref, reactive, defineProps, defineEmits, watch } from 'vue'
import { FormInstance } from 'element-plus/lib/components/form'
// 表格定义列类型
interface Column {
  [key: string]: string
}

// 查询列数据
interface Querycolumn {
  prop: string
  label: string
}

// 定义类型
interface Obj {
  [key: string]: string
}

// 定义组件 props
const props = defineProps({
  querycolumns: Array as () => Array<Querycolumn>, // 查询列数据
  columns: Array as () => Array<Column>, // 表格列数据
  data: Array as () => Array<Obj>, // 表格数据
  dialogVisible: Boolean // 是否显示对话框
})

// 控制对话框显示状态
watch(
  () => props.dialogVisible,
  (newValue) => {
    centerDialogVisible.value = newValue
  }
)
// watch(
//   [() => props.dialogVisible, () => props.data], // 监视 dialogVisible 和 data
//   ([dialogVisible, data]) => {
//     centerDialogVisible.value = dialogVisible
//     // 在这里可以对 data 做一些操作
//     console.log('data:', data)
//   }
// )

const formRules = reactive({})

// 发出事件
const emit = defineEmits(['selected', 'closed', 'QueryForm'])

// 数据和方法
const centerDialogVisible = ref(false) // 控制对话框显示状态
const form = reactive({ PageIndex: 1, PageSize: 100, totalCount: 0 }) // 表单数据
const formRef = ref<FormInstance>() // 表单引用
const selectedArrData: Ref<Obj[]> = ref([]) // 选择的数据

// 处理表单提交事件
const submit = () => {
  emit('QueryForm', form)
}

// 处理选中行改变的方法
const handleSelectionChange = (selection: Obj[]) => {
  selectedArrData.value = selection
}

// 表格行点击事件处理方法
interface CustomFormInstance extends FormInstance {
  toggleRowSelection(row: Obj): void
}
const SelectTeamBillFormRef: Ref<CustomFormInstance | undefined> = ref(undefined)
// 选择行信息
const handleRowClick = (row: Obj) => {
  const formEl = SelectTeamBillFormRef.value
  if (!formEl) return
  formEl.toggleRowSelection(row)
}

// 获取行样式
const getRowStyle = ({ row }: { row: Obj }) => {
  const isSelected = selectedArrData.value.some((item) => item.id === row.id)
  if (isSelected) {
    return {
      backgroundColor: '#ffffff',
      color: '#409EFF'
    }
  }
}

// 处理对话框关闭事件
const handleCloseDialog = () => {
  centerDialogVisible.value = false
  Clear()
}

// 处理对话框关闭事件(点击其它区域时触发)
const handleClose = (done: () => void) => {
  centerDialogVisible.value = false
  Clear()
}

//清空数据
const Clear = () => {
  // 清空搜索框值
  const formRefs = formRef.value
  if (!formRefs) return
  formRefs.resetFields()

  // 清空表格已经值
  const formEl = SelectTeamBillFormRef.value as any
  if (!formEl) return
  formEl.clearSelection()

  // 发送 '对话框状态值' 事件给父组件
  emit('closed', centerDialogVisible.value)
}

// 处理确认选择事件
const handleConfirmSelection = () => {
  // 发出事件
  emit('selected', selectedArrData.value)
  // 关闭对话框
  handleCloseDialog()
}
</script>

<style lang="less" scoped>
/* 表格行悬停样式 */
/deep/ .el-table tbody tr:hover > td {
  background-color: #f3f2f2 !important;
  color: #409eff;
  cursor: pointer;
}
</style>


